import cn from 'classnames';
import { CSSProperties, type FC } from 'react';

import styles from './UiContainer.module.scss';
import type { UiContainerProps } from './UiContainer.props';

const UiContainer: FC<UiContainerProps> = ({
  className,
  children,
  style,
  as: Component = 'article', // Переименовываем параметр as
  margin = '1rem', // Выдаем значение по умолчанию с помощью записи "= ..."
  maxWidth = '1400px',
  ...props // Добираем все оставшиеся параметры
}) => {
  return (
    <Component
      // Мы можем передавать имена классов в компонент.
      // Они всегда в приоритете
      className={cn(styles.uiContainer, className)}
      // Меняем CSS-переменные через код
      style={
        {
          '--uc-max-width': maxWidth,
          '--uc-margin': margin,
          ...style,
        } as CSSProperties
      }
      {...props}
    >
      {children}
    </Component>
  );
};

export default UiContainer;
